<template>
	<a-modal v-bind="options" class="house-detail-dialog">
		<template #title>{{ value.houseFullAddress }}</template>

		<a-tabs class="inner-tabs" size="small" destroy-inactive-tab-pane v-model:active-key="contractTabsKey">
			<a-tab-pane key="reserve" tab="租客预定" v-if="hasPermissions(['mk_contract_reserve'])">
				<reserve :query="bizQuery" source="house" :search-container="false" />
			</a-tab-pane>
			<a-tab-pane key="tenant" tab="租客合同" v-if="hasPermissions(['mk_contract_renter'])">
				<tenant :query="bizQuery" source="house" tabActiveKey="1" :search-container="false" />
			</a-tab-pane>
		</a-tabs>
	</a-modal>
</template>

<script lang="ts" setup>
	import {computed, nextTick, reactive, ref, toRef, watch} from 'vue'
	import {HouseBase, HouseRoom} from '@/interface/house'
	import houseApi from '@/api/house-api'
	import Reserve from '@/pages/contract/reserve/index.vue'
	import Tenant from '@/pages/contract/tenant/index.vue'
	import {microApps} from '@/micros/apps'
	import {useStore} from '@/store'

	const hasPermissions = useStore().hasPermissions

	const props = defineProps<{
		visible: boolean
		value: HouseBase
		active?: string
	}>()

	const emits = defineEmits(['update:visible', 'close'])
	const options = reactive({
		width: '90%',
		header: null,
		footer: null,
		centered: true,
		maskClosable: false,
		destroyOnClose: true,
		visible: toRef(props, 'visible'),
		onCancel() {
			emits('update:visible', false)
			setTimeout(() => emits('close'), 100)
		}
	})

	const currentHouse = ref<HouseBase>({})
	const contractTabsKey = ref<string>('tenant')

	// 业务查询
	const bizQuery = computed(() => {
		const query: any = {
			order: 'asc',
			houseId: currentHouse.value.id,
			tabListType: 'hide'
		}
		if (currentHouse.value.houseType === 2 && currentHouse.value.id === currentHouse.value.housePid) {
			query.houseId = undefined
			query.housePid = currentHouse.value.housePid
		}

		return query
	})

	const loadings = reactive({
		save: false,
		load: false
	})

	// 获取房源下子间房间列表
	const getHouseRooms = () => {
		loadings.load = true
		houseApi
			.houseRooms(props.value.housePid as string)
			.then(({data = []}) => {
				currentHouse.value = data.find(o => o.id === props.value.id)
			})
			.finally(() => (loadings.load = false))
	}

	watch(
		() => props.visible,
		() => {
			if (props.visible) {
				microApps.removeAll()
				currentHouse.value = props.value
				contractTabsKey.value = 'tenant'

				if (props.value.houseType === 2) {
					// 合租获取所有房间
					getHouseRooms()
				}
			}
		}
	)
</script>

<style lang="less">
	.house-detail-dialog {
		max-width: 1600px;
		overflow: hidden;

		.ant-modal-body {
			padding: 10px;
			height: 80vh;
			overflow: auto;
			min-height: 600px;
			max-height: 1000px;

			> .ant-tabs {
				height: 100%;

				.ant-tabs-content,
				.ant-tabs-content-holder {
					height: 100%;
				}

				#device_container,
				#enterprise_container {
					height: 100%;
				}

				.ant-tabs-content-left > .ant-tabs-tabpane {
					overflow: auto;
					padding: 8px 16px;
				}
			}

			.inner-tabs {
				height: 100%;

				#house_workorder_search {
					width: 600px;
				}

				> .ant-tabs-nav {
					background-color: #ffff;
					margin-bottom: 0;
				}

				> .ant-tabs-content-holder > .ant-tabs-content > .ant-tabs-tabpane {
					padding: 0;
				}
			}
		}

		.enterprise-container-dialog {
			.vxe-toolbar .vxe-buttons--wrapper,
			.vxe-toolbar .vxe-tools--wrapper {
				flex-wrap: nowrap;
				width: 40%;
			}

			#asset_tab_right_search {
				margin-left: 15px;
			}
		}

		.vxe-grid .vxe-grid--toolbar-wrapper,
		.vxe-table .vxe-grid--toolbar-wrapper {
			border-top: 1px solid #f0f0f0;
		}
	}
</style>
